<template>
  <div>
    <header>
      <div class="top1">
        <span class="iconfont icon-user"></span>&nbsp;&nbsp;&nbsp;
        <span class="iconfont icon-jilu"></span>   
        <span class="iconfont icon-shezhi" @click="set()"></span>
      </div>
      <div class="top2">
        <span class="t1"><img src="../../../public/lzc/2.png" alt="" /> </span>
        <span class="t2" @click="loginfun()">未登录</span>
      </div>
      <div class="top3">
        <ul>
          <li>
            0 <br />
            收藏
          </li>
          <li>
            0 <br />
            关注
          </li>
          <li style="border：none">
            0 <br />
            心得
          </li>
        </ul>
      </div>
      <div class="top4">
        <img src="../../../public/lzc/re1.png" alt="" />
      </div>
    </header>

    <main>
      <div class="con1">
        <div class="ding">
          <b>我的订单</b>
          <span class="s2">查看全部></span>
        </div>
        <ul>
          <li>
            <span class="iconfont icon-daizhifu1" @click="order()"></span><br /><span
              >待支付</span
            >
          </li>
          <li>
            <span class="iconfont icon-ziyuan"  @click="order()"></span><br /><span>待服务</span>
          </li>
          <li>
            <span class="iconfont icon-jinhangzhong"  @click="order()"></span><br /><span
              >进行中</span
            >
          </li>
          <li>
            <span class="iconfont icon-jilu"  @click="order()"></span><br /><span>评价有礼</span>
          </li>
          <li>
            <span class="iconfont icon-daizhifu" @click="order()"></span><br /><span
              >退款/售后</span
            >
          </li>
        </ul>
      </div>

      <div class="con2">
        <div class="ding">
          <b>我的服务</b>
        </div>
        <ul>
          <li>
            <span class="iconfont icon-yinxingqiaguanli" @click="card()"></span><br /><span
              >我的卡包</span
            >
          </li>
          <li>
            <span class="iconfont icon-youhuiquan"></span><br /><span
              >优惠券</span
            >
          </li>
          <li>
            <span class="iconfont icon-location"></span><br /><span
              @click="dz()" >常用地址</span
            >
          </li>
          <li>
            <span class="iconfont icon-qianggou"></span><br /><span
              >百万补贴</span
            >
          </li>
          <li>
            <span class="iconfont icon-chaxun"></span><br /><span
               @click="eja">试用中心</span
            >
          </li>
        </ul>

        <ul>
          <li>
            <span class="iconfont icon-fankui"></span><br /><span
              >用户反馈</span
            >
          </li>
          <li>
            <span class="iconfont icon-lianxikefu"></span><br /><span
              >联系客服</span
            >
          </li>
          <li>
            <span class="iconfont icon-jinhangzhong"></span><br /><span
              >进行中</span
            >
          </li>
          <li>
            <span class="iconfont icon-jilu"></span><br /><span>评价有礼</span>
          </li>
          <li>
            <span class="iconfont icon-zhaomu"></span><br /><span
              >手艺人招募</span
            >
          </li>
        </ul>
      </div>
      <div class="con3">
        <div class="v1">
          <b @click="member()">会员中心</b>
          <span class="s2">查看更多></span>
        </div>
        <div class="v2">
          <div><span class="iconfont icon-zuanshi"></span><b>成长值</b></div>
       
          <div><span class="iconfont icon-doudou"></span><b>H豆</b></div>
        </div>
        <div class="v1">
          <b>H豆兑换好礼</b>
          <span class="s2">查看全部></span><br />
        </div>
         <div class="over">
            <ul>
              <li><img src="../../../public/lzc/dl1.png" alt="" /></li>
              <li><img src="../../../public/lzc/dl1.png" alt="" /></li>
              <li><img src="../../../public/lzc/dl1.png" alt="" /></li>
              <li><img src="../../../public/lzc/dl1.png" alt="" /></li>
              <li><img src="../../../public/lzc/dl1.png" alt="" /></li>
              <li><img src="../../../public/lzc/dl1.png" alt="" /></li>
            </ul>
          </div>
      </div>
         <div class="con4">
                 <div class="hi1">
                      <b>浏览历史</b>
                      <span class="s2">查看更多></span>
                 </div>
                 <div class="hi2">
                     <ul>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l2.gif" alt="">
                             </div>
                             <p>夏天ins风</p>
                             <span>￥198</span>
                         </li>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l1.gif" alt="">
                             </div>
                             <p>骨胶圆面</p>
                             <span>￥196</span>
                         </li>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l3.gif" alt="">
                             </div>
                             <p>香熏乐活</p>
                             <span>￥299</span>
                         </li>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l4.gif" alt="">
                             </div>
                             <p>女神迷人</p>
                             <span>￥235</span>
                         </li>
                     </ul>
                 </div>
         </div>
        <footer>
            <p>.为你推荐.</p>
         </footer>
         <div class="con5">
                 <div class="hi2">
                     <ul>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l2.gif" alt="">
                             </div>
                             <p>夏天ins风</p>
                             <span>￥198</span>
                         </li>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l1.gif" alt="">
                             </div>
                             <p>骨胶圆面</p>
                             <span>￥196</span>
                         </li>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l3.gif" alt="">
                             </div>
                             <p>香熏乐活</p>
                             <span>￥299</span>
                         </li>
                         <li>
                             <div class="tu">
                                 <img src="../../../public/lzc/l4.gif" alt="">
                             </div>
                             <p>女神迷人</p>
                             <span>￥235</span>
                         </li>
                     </ul>
                 </div>
         </div>
         <p class="pz">河狸家</p>
    </main>
    <!-- footer -->
    <!-- <Footer /> -->
   
  </div>
</template>

<script>

export default {
  components: {
  },
methods:{
  loginfun(){
      this.$router.push("/login")
    },
    set(){
       this.$router.push("/set")
    },
     order(){
       this.$router.push("/order")
    },
    card(){
       this.$router.push("/card")
    },
    member(){
       this.$router.push("/member")
    },
     eja(){
       this.$router.push("/eja")
    },
    dz(){
       this.$router.push("/dz")
    },
  }
};
</script>

<style scoped>
@import url("../../views/lzc/font/iconfont.css");
header {
  height: 5.2rem;
  width: 100%;
  background: url("../../../public/lzc/dl.png") no-repeat;
  background-size: 100% 100%;
}
header .top1 {
  display: flex;
  position: relative;
}
header .top1 .iconfont {
  color: white;
  font-size: 0.4rem;
}
header .top1:first-child {
  position: absolute;
  right: 0.2rem;
  top: 1.06rem;
}
header .top2 .t1 {
  width: 0.5rem;
  height: 0.5rem;
  position: relative;
}

header .top2 .t1 img {
  width: 1rem;
  border-radius: 50%;
  position: absolute;
  top: 1.8rem;
  left: 0.2rem;
}
header .top2 .t2 {
  position: relative;
  top: 2.2rem;
  left: 1.5rem;
  color: white;
  font-size: 0.4rem;
}
header .top3 {
  position: relative;
}
header .top3 ul {
  position: absolute;
  top: 3rem;
  display: flex;
  justify-content: space-around;
}
header .top3 ul li {
  width: 2.5rem;
  color: white;
  border-right: 0.01rem solid gray;
  text-align: center;
}
header .top4 {
  width: 90%;
  position: absolute;
  top: 4.42rem;
  left: 0.4rem;
}
header .top4 img {
  width: 100%;
}

main {
  background-color: gainsboro;
}
main .con1 {
  height: 2.32rem;
  width: 95%;
  background-color: white;
  margin: auto;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
}
main .con1 .ding {
  display: flex;
  justify-content: space-between;
}
main .con1 .ding b {
  font-size: 0.3rem;
}
main .con1 .ding .s2 {
  font-size: 0.22rem;
  color: gray;
}
main .con1 ul {
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
main .con1 ul li {
  text-align: center;
}
main .con1 ul .iconfont {
  font-size: 0.6rem;
  color: #c58a58;
}
main .con1 ul li span {
  color: gray;
  font-size: 0.3rem;
}

main .con2 {
  height: 4.3rem;
  width: 95%;
  background-color: white;
  margin: auto;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
}
main .con2 .ding {
  display: flex;
  justify-content: space-between;
}
main .con2 .ding b {
  font-size: 0.3rem;
}
main .con2 .ding .s2 {
  font-size: 0.22rem;
  color: gray;
}
main .con2 ul {
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
main .con2 ul li {
  text-align: center;
}
main .con2 ul .iconfont {
  font-size: 0.6rem;
  color: black;
}
main .con2 ul li span {
  color: gray;
  font-size: 0.3rem;
}

main .con3 {
  height: 4.8rem;
  width: 95%;
  background-color: white;
  margin: auto;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
}
main .con3 .v1 {
  line-height: 1rem;
  height: 1rem;
  /* border: 0.01rem solid red; */
  display: flex;
  justify-content: space-between;
}
ain .con3 .v1 b {
  font-size: 0.3rem;
}
main .con3 .v1 .s2 {
    position: absolute;
    right: 0.5rem;
  font-size: 0.22rem;
  color: gray;
}
main .con3 .v2 {
  border-bottom: 0.01rem solid gainsboro;
  display: flex;
}
main .con3 .v2 span {
  width: 1rem;

  font-size: 0.8rem;
}
main .con3 .v2 .iconfont {
  border-radius: 50%;
  background-color: #fdf7ed;
  color: #e8af7d;
}
main .con3 .v2 b {
  color: gray;
}
main .con3 .v2 div {
  width: 4rem;
}
main .con3 .over ul{
    display: flex;
    overflow-x:auto;
}

main .con4{
    width: 95%;
    height: 3rem;
    background-color: white;
    margin: auto;
    margin-top: 0.2rem;
    border-radius:0.2rem;
}
main .con4 .hi1{
    display: flex;
    justify-content: space-between;
}
main .con4 .hi2 ul{
    display: flex;
}

main .con4 .hi2 ul li{
    width:25% ;
    height:2.5rem ;
   
}
main .con4 .hi2 ul li .tu{
  
    height:1.8rem ;
    /* border: 0.01rem solid red; */
}

main .con4 .hi2 ul li  img{
    width:100% ;
    height:100%;
}
main .con4 .hi2 ul li p{
    color: gray;
}
main .con4 .hi2 ul li span{
    color: red;
}
footer{
    width: 100%;
    height: 0.5rem;
   
}
footer  p{
   text-align: center; 
   font-size:0.4rem;
}
main .con5 .hi2 ul{
    display: flex;
    flex-wrap: wrap;
}

main .con5 .hi2 ul li{
    width:50% ;
  
   
}
main .con5 .hi2 ul li .tu{
     width:95% ;
    height:3rem ;
    /* border: 0.01rem solid red; */
}

main .con5 .hi2 ul li  img{
    width:100% ;
    height:100%;
}
main .con5 .hi2 ul li p{
    color: gray;
}
main .con5 .hi2 ul li span{
    color: red;
}
main .pz{
    text-align: center;
    color: gray;
    font-size: 0.5rem;
    padding: 0.2rem 0;
}
</style>